<template>
  <div>
    <div class="header">
      <div>
        客户姓名<el-input v-model="input" placeholder="请输入客户姓名"></el-input>
      </div>
      <div>
        客户手机<el-input v-model="input" placeholder="请输入客户手机"></el-input>
      </div>
      <div>
        归属人<el-input v-model="input" placeholder="请输入线索归属人"></el-input>
      </div>
      <div>
        渠道来源<el-select v-model="value" placeholder="渠道来源">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="header2">
      <div>
        线索状态<el-select v-model="value" placeholder="线索状态">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="Followuptime">
        跟进时间<el-time-picker is-range v-model="value1" range-separator="-" start-placeholder="开始时间"
          end-placeholder="结束时间" placeholder="选择时间范围" class="Ftime">
        </el-time-picker>
      </div>
      <el-button type="primary" icon="el-icon-search" class="search">搜索</el-button>
      <el-button type="primary" icon="el-icon-refresh" class="reset">重置</el-button>
    </div>
    <div class="mian">
      <div class="fuction">
        <el-button type="primary" plain icon="el-icon-plus" @click="dialogFormVisible = true">新增</el-button>
        <el-button type="success" plain icon="el-icon-edit-outline">修改</el-button>
        <el-button type="danger" plain icon="el-icon-delete">删除</el-button>
      </div>
      <div class="content">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="id" label="线索编号" width="110">
          </el-table-column>
          <el-table-column prop="name" label="客户姓名" width="110">
          </el-table-column>
          <el-table-column prop="tel" label="手机号码" width="110">
          </el-table-column>
          <el-table-column prop="from" label="渠道来源" width="110">
          </el-table-column>
          <el-table-column label="创建时间" width="155">
            <template slot-scope="scope">{{ scope.row.firstData }}</template>
          </el-table-column>
          <el-table-column prop="XSfrom" label="线索归属" width="120">
          </el-table-column>
          <el-table-column prop="tag" label="标签" width="100"
            :filters="[{ text: '跟进中', value: '跟进中' }, { text: '已分配', value: '已分配' }]" :filter-method="filterTag"
            filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag :type="scope.row.tag === '已分配' ? 'primary' : 'success'" disable-transitions>{{ scope.row.tag
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="下次跟进时间" width="155">
            <template slot-scope="scope">{{ scope.row.nextDate }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" class="el-icon-edit"></el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
                icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage2" :page-sizes="[10, 20, 30, 40]" :page-size="10"
          layout="total, sizes, prev, pager, next, jumper" :total="1146" background>
        </el-pagination>
      </div>
    </div>
    <el-dialog title="添加线索" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div class="dialog-first">
          <el-form-item label="手机尾号" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="客户姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </div>
        <div class="dialog-first">
          <el-form-item label="渠道来源">
            <el-select v-model="form.region" placeholder="渠道来源">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动信息">
            <el-select v-model="form.region" placeholder="活动信息">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="dialog-first">
          <div class="dialog-first sex">
            客户性别
            <el-radio-group v-model="radio">
              <el-radio :label="3">男</el-radio>
              <el-radio :label="6">女 </el-radio>
              <el-radio :label="9">未知</el-radio>
            </el-radio-group>
          </div>
          <div class="dialog-first age">
            客户年龄
            <el-input-number v-model="num" @change="handleChange" :min="年龄" :max="10" label="年龄"></el-input-number>
          </div>

        </div>
        <div class="dialog-first tel">
          <div class="dialog-first ">
            <span>微信号</span>
            <el-input v-model="input" placeholder="请输入微信号码"></el-input>
          </div>
          <div class="dialog-first">
            <span>QQ号码</span>
            <el-input v-model="input" placeholder="请输QQ号码"></el-input>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        <el-button @click="dialogFormVisible = false" class="no">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }, ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }, rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      formLabelWidth: '120px',
      currentPage2: 1,
      tableData: [{
        id: 10061,
        tel: 1231231311,
        from: '线下地推',
        firstData: '2016-05-03 19:01:19',
        name: '731',
        XSfrom: 'admin',
        nextDate: '2016-05-10 19:01:19',
        tag: '跟进中'
      }, {
        id: 10062,
        tel: 1231231312,
        from: '线下地推',
        firstData: '2016-05-03 19:01:19',
        name: '732',
        XSfrom: 'admin',
        nextDate: '2016-05-10 19:01:19',
        tag: '已分配'
      }, {
        id: 10063,
        tel: 1231231313,
        from: '线下地推',
        firstData: '2016-05-03 19:01:19',
        name: '733',
        XSfrom: 'admin',
        nextDate: '2016-05-10 19:01:19',
        tag: '已分配'
      }, {
        id: 10064,
        tel: 1231231314,
        from: '线下地推',
        firstData: '2016-05-03 19:01:19',
        name: '734',
        XSfrom: 'admin',
        nextDate: '2016-05-10 19:01:19',
        tag: '已分配'
      }, {
        id: 10065,
        tel: 1231231315,
        from: '线下地推',
        firstData: '2016-05-03 19:01:19',
        name: '735',
        XSfrom: 'admin',
        nextDate: '2016-05-10 19:01:19',
        tag: '已分配'
      }, {
        id: 10066,
        tel: 1231231316,
        from: '线下地推',
        firstData: '2016-05-03 19:01:19',
        name: '736',
        XSfrom: 'admin',
        nextDate: '2016-05-10 19:01:19',
        tag: '已分配'
      }],
      multipleSelection: []
    }
  },
  methods: {

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },


  }

}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .el-input {
    width: 206px;
    height: 35px;
    margin-left: 10px;
  }

  .el-select {
    width: 206px;
    margin-left: 10px;
  }
}


.el-time-picker {
  margin-left: 10px;
}

.Followuptime {
  margin-left: 63px;
}

.Ftime {
  margin-left: 10px;
}

.search {
  margin-left: 10px;
}

.header2 {
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;

  .el-select {
    width: 206px;
    margin-left: 10px;
  }
}

.reset {
  background-color: #ccc;
  border-color: #ccc;
}

.el-button {
  height: 35px;
}

.mian {
  padding-top: 10px;
  padding-left: 24px;
  box-sizing: border-box;
}

.fuction {
  display: flex;
}

.el-button--default {
  background-color: #409EFF;
}

.el-pagination {
  margin-top: 20px;
  float: right;
}

.no {
  background-color: white;
}

.dialog-first {
  display: flex;
  align-items: center;

  .el-select {
    width: 206px;
  }
}

.sex {
  padding-left: 30px;

  .el-radio-group {
    margin-left: 10px;
  }
}

.age {
  padding-left: 50px;

  .el-input-number {
    margin-left: 12px;
  }
}

.tel {
  margin-top: 15px;
  padding-left: 15px;

  span {
    width: 100px;
  }
}
</style>